﻿@model StockShark.ViewModels.BAChartsData

@{
    ViewBag.Title = ViewBag.Header = "Wykresy - " + Model.BrokerageAccount.Name;
}

<script src="@Url.Content("~/Scripts/flot/jquery.flot.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/flot/jquery.flot.pie.min.js")" type="text/javascript"></script>

@Html.Partial("_BAMenuPartial", Model.BrokerageAccount)

<h4>Podział portfela</h4>

<div id="valueParts">
    <ul>
        <li>Wolne środki: <strong>@Html.DisplayFor(model => Model.BrokerageAccount.Balance) PLN</strong></li>
        <li>Akcje: <strong>@Html.DisplayFor(model => Model.SharesValue) PLN</strong></li>
        <li>Waluty: <strong>@Html.DisplayFor(model => Model.CurrenciesValue) PLN</strong></li>
        <li>Surowce: <strong>@Html.DisplayFor(model => Model.MaterialsValue) PLN</strong></li>
    </ul>
</div>
<div id="pla2"></div>

<div class="clear"></div>


<h4>Wartość rachunku w czasie</h4>

<div id="periodSelect">
@using (Html.BeginForm("Charts", "BrokerageAccount", FormMethod.Get))
{
    @Html.Hidden("name", Model.BrokerageAccount.Name)
    @Html.Label("period", "Okres ")
    @Html.DropDownList("period", (IEnumerable<SelectListItem>)ViewBag.PeriodSelectList)
}
</div>

<div id="pla"></div>


<script type="text/javascript">
function showTooltip(x, y, text) {
	var tooltip = $('<div id="tooltip">' + text + "</div>")


	tooltip.css({
        'left': x+4,
        'top': y-40,
        '-moz-border-radius': '4px',
        'border-radius': '4px',
		'position': 'absolute',
		'border': '1px solid #369',
		'padding': '2px',
		'background-color': '#eef',
		'opacity': 0.80,
		'z-index': 3,
		'pointer-events':'none',
		'display':'none'
	}).appendTo("body");
	tooltip.fadeIn(200);
}

$(function () {
    var dataset = @Model.GetFlotData();
    var dataset2 = @Html.Raw(Model.GetPieData());
    var ticks = @Html.Raw(Model.GetFlotTicks());
    var newTicks = [];
    var step = Math.floor(ticks.length / 10) + 1;
    for (var i = ticks.length-1; i >= 0; i-=step)
        newTicks.push(ticks[i]);

    $.plot($("#pla"), dataset, {
        xaxis: { ticks: newTicks, labelWidth: 100, min: -1, max: ticks.length },
        yaxis: { tickDecimals: 2 },
        series: { lines: { show: true,  fillColor: "rgba(238, 238, 255, 0.4)" }, points: { show: true, fill: true, radius: 2 }, color: "#369" },
        grid: { hoverable: true, backgroundColor: { colors: ["#efe", "#fee"] } }
    });

    $("#pla").bind("plothover", function (event, pos, item) {
        var lastCursor = '';
        if (item) {
			if (previousPoint != item.dataIndex) {
				previousPoint = item.dataIndex;
				$("#tooltip").remove();
				var x = item.datapoint[0];
				showTooltip(item.pageX, item.pageY, item.datapoint[1].toFixed(2) + " PLN<br/>" + ticks[item.datapoint[0]][1]) // show tooltip
			}
		}
		else {
			$("#tooltip").remove();
			previousPoint = null;
		}
    });

    $("select#period").change(function() {
        $("form").submit();
    });

    $.plot($("#pla2"), dataset2,
    {
        series: { pie: { show: true } },
        legend: { show: false }
    });
});
</script>

